<template>
	<div class="public-header">
		<div class="header-container">
			<div class="pLeft-wrap">
				<router-link :to="aimUrl">
					<i :class="'iconfont '+iconArr[0].iconLeft"></i>
				</router-link>
			</div>
			<div class="pCenter-wrap">
				<i class="iconfont icon-sousuo sousuo" v-if="isInput"></i>
				<input type="text" :placeholder="placeholder" v-if="isInput">
				<span v-else>{{placeholder}}</span>
			</div>
			<div class="pRight-wrap">
				<router-link :to="rightUrl">
					<i :class="'iconfont '+iconArr[0].iconRight"></i>
				</router-link>
			</div>
		</div>
	</div>
</template>
<script>
	import "../assets/iconfont/iconfont.css"
	export default{
		name:'shopheader',
		data(){
			return{
			}
		},
		props:{
			aimUrl:{
				type:String,
				default:'/'
			},
			rightUrl:{
				type:String,
				default:'/'
			},
			isInput:{
				type:Boolean,
				default:false
			},
			iconArr:{
				type:Array,
				default:function(){
					return[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-lajixiang"
						}
					]
				}
			},
			placeholder:{
				type:String,
				default:''
			}
		}
	}
</script>
<style scoped lang="less">
	.public-header{
		width: 100%;
		background-color: #f55;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		.header-container{
			width: 95%;
			margin:0 auto;
			display: flex;
			color: #fff;
			font-size: 18 / 50rem;
			font-weight: 700;
			text-align: center;
			line-height: 88 / 2 / 50rem;
			.pLeft-wrap,.pCenter-wrap,.pRight-wrap{
				float: left;
			}
			.pLeft-wrap,.pRight-wrap{
				width: 30 / 50rem;
				height: 88 / 2 / 50rem;
				i{
					font-size: 22 / 50rem;
					font-weight: normal;
				}
			}
			@pHeight:56 / 2 / 50rem;
			.pCenter-wrap{
				flex:1;
				height: 88 / 2 / 50rem;
				position: relative;
				// line-height:  @pHeight;
				color: rgba(0,0,0,.7);
				input{
					width: 96%;
					height:@pHeight;
					line-height: @pHeight;
					border-radius: 4/50rem;
					border: none;
				    // opacity: 0.7;
				    font-size: 15 / 50rem;
				    text-indent: 32/50rem;
				    font-family: YouYuan;
				    outline: none;
				    font-weight: 700;
				    color: rgba(0,0,0,0.7);
				}
				.sousuo{
					position: absolute;
					top:0;
					left: 15/50rem;
					font-size: 20 / 50rem;
					font-weight: 700;
				}
				span{
					color: #fff;
				}
			}
			.pRight-wrap{

			}
		}
	}
</style>